<template>
  <div class="dashboard-container">
    <h2 class="head-big-title">{{detailData.productName?detailData.productName:'Produk A'}}</h2>
    <Pathnavigation style="margin-left: 3%;"></Pathnavigation>
    <div style="width: 92%;margin: 0 4% 30px 4%;background-color: white;text-align: left;padding: 10px 1% 80px 2%;">
      <el-form
        :inline="true"
        :model="detailData"
        label-position="top"
        size="medium"
        label-width="110px">
        <el-form-item label="Nama Produk" class="one-hang">
          <el-input v-model="detailData.productName" :disabled="role == dealerMValue"></el-input>
        </el-form-item>
        <el-form-item label="Imej Produk" class="one-hang">
          <div style="display: block;width: 100%;">
            <div v-for="(item,index) in detailData.picList" :key="index" style="width: 75px;height: 75px;position: relative;float: left;margin-left: 15px;">
              <el-image
                style="width: 75px;height: 75px;margin-right: 15px;"
                :src="picbase + item.picUrl">
              </el-image>
            </div>
            <el-upload
              :disabled="role == dealerMValue"
              ref="upload"
              :limit="1"
              action="http"
              accept=".jpg, .png"
              :on-change="handleChange"
              :on-remove="handleRemove"
              :on-exceed="handleExceed"
              :file-list="fileList"
              :show-file-list="false"
              :http-request="uploadFile"
              :auto-upload="false">
              <i slot="trigger" v-if="detailData.picList.length < 3" class="el-icon-plus" style="width: 75px;height: 75px;border: 2px solid slategray;border-radius: 6px;text-align: center;margin-left: 11px;float: left;line-height: 75px;font-size: 24px;"></i>
              <div slot="tip" class="el-upload__tip" style="line-height: 24px;display: block;clear: both;">* Image Dimension 800px x 800px</div>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="Kategori Produk" class="one-hang">
          <el-select v-model="detailData.categoryId" :disabled="role == dealerMValue">
            <el-option v-for="(item,index) in categoryList" :key="index" :label="item.categoryName" :value="item.categoryId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Penerangan" class="one-hang">
          <el-input v-model="detailData.description" :disabled="role == dealerMValue" maxlength="500"></el-input>
        </el-form-item>
        <el-form-item label="Jenama" class="one-hang">
          <el-input v-model="detailData.brand" :disabled="role == dealerMValue" maxlength="30"></el-input>
        </el-form-item>
        <el-form-item label="Model Produk" class="one-hang">
          <el-input v-model="detailData.productModel" :disabled="role == dealerMValue" maxlength="30"></el-input>
        </el-form-item>
        <h2 class="big-title">Price</h2>
        <el-form-item class="three-hang">
          <p style="line-height: 16px;height: 52px;">Product Cost Unit Price (Owner)</p>
          <el-input v-model="detailData.priceCost" :disabled="role == dealerMValue"  type="number"></el-input>
        </el-form-item>
        <el-form-item class="three-hang">
          <p style="line-height: 16px;height: 52px;">Unit Price(Master Dealer)</p>
          <el-input v-model="detailData.priceMasterDealer" :disabled="role == dealerMValue"  type="number"></el-input>
        </el-form-item>
        <el-form-item label="" class="three-hang">
          <p style="line-height: 16px;height: 52px;">Unit Price(Dealer)</p>
          <el-input v-model="detailData.priceDealer" :disabled="role == dealerMValue"  type="number"></el-input>
        </el-form-item>
        <el-form-item label="SKU" class="one-hang">
          <el-input v-model="detailData.productSku.skuDescribe" :disabled="role == dealerMValue"></el-input>
        </el-form-item>
        <el-form-item label="MOQ" class="one-hang">
          <el-input v-model="detailData.productSku.moq"></el-input>
        </el-form-item>
        <el-form-item label="Tempoh Penghantaran (Hari)" class="two-hang">
          <el-input v-model="detailData.productSku.deliveryDay"></el-input>
        </el-form-item>
        <el-form-item label="Berat (kg)" class="two-hang">
          <el-input v-model="detailData.productSku.weight" :disabled="role == dealerMValue"></el-input>
        </el-form-item>
        <el-form-item label="Dimensi (cm)" style="width: 100%;display: inline-block;">
          <el-input v-model="detailData.productSku.length" style="width: 30%;margin-right: 4%;" :disabled="role == dealerMValue"></el-input>
          <el-input v-model="detailData.productSku.width" style="width: 30%;margin-right: 4%;" :disabled="role == dealerMValue"></el-input>
          <el-input v-model="detailData.productSku.height" style="width: 30%;" :disabled="role == dealerMValue"></el-input>
        </el-form-item>
        <el-form-item label="Ukuran Seunit (UOM)" class="one-hang">
          <el-input v-model="detailData.productSku.unit" :disabled="role == dealerMValue"></el-input>
        </el-form-item>
        <el-form-item label="Unit Jualan" class="one-hang">
          <el-input v-model="detailData.productSku.masterUnit" :disabled="role == dealerMValue"></el-input>
        </el-form-item>
        <el-form-item label="Kuantiti Penukaran" class="one-hang">
          <el-input v-model="detailData.productSku.exchangeNum" :disabled="role == dealerMValue"></el-input>
        </el-form-item>
        <el-form-item label="Stok" class="one-hang">
          <el-input v-model="detailData.productSku.stock"  type="number"></el-input>
        </el-form-item>
        <el-form-item label="Status" class="one-hang">
          <el-select v-model="detailData.state" placeholder="Status">
            <el-option label="Aktif" :value="0"></el-option>
            <el-option label="Tak Aktif" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <div>
          <el-button type="primary" @click="saveDataNow" style="float: right;margin: 16px 4% 16px 100px;">Simpan</el-button>
          <el-button @click="$router.push({ path: '/Products/Query' })" style="float: right;margin: 16px 0">Balik</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { editProductApi, uploadFileApi, editDealer_productApi } from '@/api/user'

export default {
  name: 'CustomersDetails',
  data() {
    return {
      tableData: [],
      categoryList: [],
      detailData: {
        skuDate: {},
        productSku: {},
        picList: []
      },
      uploadPicNum: 0,
      fileData: '', // 文件上传数据（多文件合一）
      fileList: [], // upload多文件数组
      orderChart: ''
    }
  },
  computed: {
    ...mapGetters([
      'role'
    ])
  },
  created() {
    this.categoryList = this.$store.state.user.categoryList
    this.checkID()
  },
  mounted() {
  },
  methods: {
    checkID() {
      const detail = this.$getDetail()
      if (detail) {
        // console.log(detail)
        if (detail.categoryName && detail.categoryId) {
          this.detailData = detail
          if (this.detailData.billesAddres == null) {
            this.detailData.billesAddres = {}
          }
          if (this.detailData.shopAddres == null) {
            this.detailData.shopAddres = {}
          }
          return true
        }
      }
      // this.$router.push({ name: 'Products' })
    },
    saveDataNow() {
      if (this.role == this.dealerMValue) {
        editDealer_productApi(this.detailData).then(res => {
          this.$message({
            message: 'Berjaya ubah!',
            type: 'success'
          })
          this.$router.push({ path: '/Products/Query' })
        }).catch(err => {
          console.log(err)
        })
      } else {
        editProductApi(this.detailData).then(res => {
          this.$message({
            message: 'Berjaya ubah!',
            type: 'success'
          })
          this.$router.push({ path: '/Products/Query' })
        }).catch(err => {
          console.log(err)
        })
      }
    },
    uploadFile(file) {
      this.fileData.append('mf', file.file)
    }, // 上传文件
    handleRemove(file, fileList) {
      this.fileList = fileList
    }, // 移除
    handleExceed(files, fileList) {
      this.$message.warning('Hanya terbanyak 3 fail boleh dipilih ')
    }, // 选取文件超过数量提示
    handleChange(file, fileList) {
      const existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)
      if (existFile) {
        this.$message.error('Fail yang dipilih telah wujud')
        fileList.pop()
      }
      this.fileList = fileList
      this.submitUpload()
    }, // 监控上传文件列表
    submitUpload() {
      if (this.fileList.length === 0) {
        this.$message({
          message: 'Sila pilih',
          type: 'warning'
        })
        return false
      } else {
        const isLt2M = this.fileList.every(file => file.size / 1024 / 1024 < 1)
        if (!isLt2M) {
          this.$message.error('Sila pastikan fail yang dipilih tidak melebihi 1MB')
        } else {
          this.fileData = new FormData()
          this.$refs.upload.submit()
          this.fileData.append('num', 2)
          this.fileData.append('index', 1)
          uploadFileApi(this.fileData).then((response) => {
            this.detailData.picList.push(response.data.picUrl[0])
            this.$refs.upload.clearFiles()
            this.sortOut()
          })
        }
      }
    }, // 上传到服务器
    sortOut() {
      if (this.detailData.picList.length && this.detailData.picList.length > 1) {
        for (let i = 0; i < this.detailData.picList.length; i++) {
          this.detailData.picList[i].index = i + 1
        }
      }
    },
    deletePicDate(item) {
      let index = 404
      if (this.detailData.picList.length && this.detailData.picList.length > 0) {
        for (let i = 0; i < this.detailData.picList.length; i++) {
          if (this.detailData.picList[i].index == item.index) {
            index = i
          }
        }
        if (index !== 404) {
          this.detailData.picList.splice(index, 1)
        }
      }
    },
    handleEdit() {
      console.log('Chose handleEdit')
    }
  }
}
</script>

<style lang="scss" scoped>
  .head-big-title{
    text-align: left;
    font-size: 20px;
    margin: 20px 0 0 3%;
  }
  .dashboard-container{
    margin-top: 20px;
    text-align: center;
  }
  .one-hang{
    display: inline-block;
    width: 100%;
    margin: 0;
    .el-input{
      width: 96%;
    }
    .el-select{
      width: 96%;
    }
  }
  .two-hang{
    display: inline-block;
    width: 50%;
    margin: 0;
    .el-input{
      width: 92%;
    }
    .el-select{
      width: 92%;
    }
  }
  .three-hang{
    width: 28%;
  }
  .three-hang + .three-hang{
    margin-left: 3%;
  }
</style>
<style scoped>
  /deep/.head-search label{
    line-height: 30px;
  }
  .big-title{
    text-align: left;
    font-size: 19px;
    margin: 20px 0;
  }
  .product-pic img{
    width: 88px;
    margin-right: 30px;
  }
  /deep/ .el-upload-list{
    display: none;
  }
  /deep/ .el-upload-list img{
    width: 70px;
    height: 70px;
  }
  /deep/ .el-upload img{
    width: 80px;
    height: 80px;
  }
</style>
